<template>
  <div id="app">
    <!-- 现代化顶部导航 -->
    <header class="modern-header">
      <div class="header-container">
        <div class="logo-section">
          <div class="logo-icon">
            <el-icon size="28"><Document /></el-icon>
          </div>
          <h1 class="logo-text">程序化启动方案校验系统</h1>
        </div>
        
        <nav class="nav-menu">
          <el-menu 
            mode="horizontal" 
            :router="true" 
            :default-active="$route.path"
            :ellipsis="false"
            class="modern-nav-menu"
          >
            <el-menu-item index="/" class="nav-item">
              <el-icon><House /></el-icon>
              <span>首页</span>
            </el-menu-item>
            <el-menu-item index="/device-template" class="nav-item">
              <el-icon><Upload /></el-icon>
              <span>设备模板</span>
            </el-menu-item>
            <el-menu-item index="/startup-plan" class="nav-item">
              <el-icon><Document /></el-icon>
              <span>启动方案</span>
            </el-menu-item>
            <el-menu-item index="/terminology" class="nav-item">
              <el-icon><Setting /></el-icon>
              <span>术语库</span>
            </el-menu-item>
          </el-menu>
        </nav>

        <div class="header-spacer" />
      </div>
    </header>
    
    <!-- 现代化主内容区 -->
    <main class="modern-main">
      <div class="main-container">
        <router-view />
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import { Document, House, Upload, Setting } from '@element-plus/icons-vue'
</script>

<style scoped>
#app {
  min-height: 100vh;
  background: var(--bg-secondary);
}

.modern-header {
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-container {
  width: 100%;
  margin: 0;
  padding: 0 20px 0 20px;
  display: flex;
  align-items: center;
  height: 68px;
  position: relative;
}

.logo-section {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.logo-icon {
  width: 40px;
  height: 40px;
  background: var(--primary-color);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: var(--shadow-sm);
}

.logo-text {
  font-size: 20px;
  font-weight: 700;
  color: #e8edff;
  margin: 0;
}

.nav-menu {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.header-spacer {
  margin-left: auto;
}

.modern-nav-menu {
  border: none !important;
  background: transparent !important;
  white-space: nowrap;
}

.modern-nav-menu .nav-item {
  margin: 0 6px;
  border-radius: 22px;
  transition: background 0.2s ease, color 0.2s ease;
  padding: 0 14px;
  color: var(--text-secondary) !important;
  cursor: pointer;
  user-select: none;
}

.modern-nav-menu .nav-item:hover {
  background: rgba(107, 124, 255, 0.12) !important;
  color: var(--text-primary) !important;
}

.modern-nav-menu .nav-item.is-active {
  background: var(--primary-color) !important;
  color: #fff !important;
}

.modern-nav-menu .nav-item .el-icon {
  margin-right: 8px;
  font-size: 18px;
}

.modern-main {
  padding: 8px 0 16px;
  min-height: calc(100vh - 80px);
}

.main-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .header-container {
    padding: 0 24px;
  }
  
  .main-container {
    padding: 0 24px;
  }
  
  .logo-text {
    font-size: 20px;
  }
}

@media (max-width: 768px) {
  .header-container {
    padding: 0 16px;
    height: 70px;
  }
  
  .main-container {
    padding: 0 16px;
  }
  
  .logo-text {
    display: none;
  }
  
  .modern-nav-menu .nav-item span {
    display: none;
  }
  
  .modern-nav-menu .nav-item {
    margin: 0 4px;
    padding: 0 12px;
    cursor: pointer;
  }
}
</style>